﻿body {
	background-color: #bce0ee;
	background-image: url( '../Images/bg.png' );
	font-size: 10px;
	font-family: Verdana;
}

a {
	color: #000;
	text-decoration:none;
}

div.contentBox {
	background-color: #ffffff;
	margin:0 auto 10px;
	border: 1px solid #000;
}

div.mainBox {
	background-color: #ffffff;
	width: 950px;
	margin: 0 auto;
	border: 1px solid #aaa;
}

div.mainBox > div.mid {
	overflow: hidden;
}

div.myOverview {
	height: 143px;
	width: 450px;
	background-image: url( '../Images/backdrop.png' );
}

div.boxContent {
	padding:5px 5px 5px 5px;
}

/* header ---------------------- */

div.mainBox > div.top {
	height: 150px;
	width: 950px;
	background-image: url( '../Images/header.gif' );
	overflow: hidden;
}

div.mainBox > div.top > a > img {
	float: left;
	border:0;
	padding:5px 0 0 5px;
}

div.boxHeader {
	padding:5px 0 5px 0;
	width:100%;
	background-color:#ccc;
	text-indent:10px;
	font-weight:bolder;
}

div.usersBox {
	background-color: #ffffff;
	margin:10px 10px;
	padding:10px 5px 10px 5px;
	border: 1px solid #000;
	text-align:center;
}

/* footer ---------------------- */

div.mainBox > div.bot > p {
	text-align: center;
}

div.mainBox > div.bot > p.copyright > a, div.mainBox > div.bot > p.copyright {
	color: #aaa;
}

/* navigation ---------------------- */

div.navBar {
	width:900px;
	min-height:25px;
	position:relative;
	padding: 5px 0 5px 0;
	top:122px;
	left: -70px;
}

div.navBar > div.navButton {
	background-color: #ffffff;
	margin:0 auto 0 5px;
	border: 1px solid #000;
	min-width:90px;
	min-height:12px;
	text-align:center;
	padding:5px 5px 5px 5px;
	float:left;
	cursor:pointer;
}

div.navBar > div.navButton:hover {
	background-color: #aaa;
	margin:0 auto 0 5px;
	border: 1px solid #000;
	width:90px;
	min-height:12px;
	text-align:center;
	padding:5px 5px 5px 5px;
	float:left;
	font-weight:bolder;
}

div.SubnavBar {
	width:900px;
	height:25px;
	position:relative;
	padding: 5px 0 0 5px;
	margin:0 0 0 0;
}

div.SubnavBar > div.navButton:first-child {
	border-left: none;
}

div.SubnavBar > div.navButton {
	margin:0 auto 0 5px;
	text-align:center;
	padding:5px 35px 0 35px;
	float:left;
	cursor:pointer;
	border-left:thin gray dotted;
}

div.SubnavBar > div.navButton:hover {
	margin:0 auto 0 5px;
	text-align:center;
	padding:5px 35px 5px 35px;
	float:left;
	font-weight:bolder;
}

div.navButton > a {
	text-decoration:none;
}

/* column division ---------------------- */

div.column {
	float: left;
}

#column1 {
	overflow: hidden;
	width:450px;
	padding:10px 5px 10px 5px;
}

#column2 {
	overflow: hidden;
	width:310px;
	padding:10px 0 10px;
}

#column3 {
	overflow: hidden;
	width:170px;
	padding:10px 5px 10px 5px;
}

body#news_body #column1 {
	overflow: hidden;
	width:230px;
	padding:10px 5px 10px 5px;
}

body#news_body #column2 {
	overflow: hidden;
	width:530px;
	padding:10px 0 10px;
}

body#news_body #column3 {
	overflow: hidden;
	width:170px;
	padding:10px 5px 10px 5px;
}

/* avatar widget ---------------------- */
#avatar-plate {
	background: url(../Images/misc/info_habbo_plate.png) no-repeat 2px -162px;
	height: 138px;
	width: 96px;
	position:relative;
	top: 45px;
	left: 15px;
	cursor:pointer;
}

#avatar-plate:hover {
	background-position: 2px 75px;
}

div.avatarinfo {
	height:60px;
	width:100%;
	background-color: #7B7B71;
}

div.avatarextrainfo {
	width:100%;
	background-color: #A0A097;
	margin:0 auto 10px;
}

div.avatarextrainfo > .content {
	padding:10px 15px 10px 15px;
	border-bottom:thin gray dotted;
}

input {
	border:0;
	font-size:10px;
	padding:1px 2px 1px 5px;
	margin:5px 0 5px 5px;
}

input:focus {
	background-color:#eee;
}

.MottoContainer {
	margin:5px 3px;
	width:323px;
	max-height:24px;
	float:right;
	background-color: transparent;
	background-repeat: no-repeat;
    background-image: url(../Images/misc/motto_field.png);
	overflow:hidden;
}

.MottoContainer > .Usersname {
	float:left;
	font-weight:bold;
	padding:5px 2px 5px 5px;
}

.MottoContainer > .Usersmotto {
	float:left;
	padding:5px 2px 5px 5px;
	color:gray;
}

/* Link bar ----------------- */

div.link-bar {
	padding: 30px 0 5px 20px;	
	background-color: #7B7B71;
}

div.link-bar div {
	float: left;
	margin: 5pt 25px 0pt 7px;
    padding: 2px 0 2px 20px;
    line-height: 16px;
    float: left;
	background-color: transparent;
	background-repeat: no-repeat;
    background-image: url(../Images/icons/info_icons.png);
}

div.link-bar > .change-looks   { background-position: 0 -976px; }
div.link-bar > .credits        { background-position: 0 -143px; }
div.link-bar > .club           { background-position: 0 -95px; }
div.link-bar > .vipclub        { background-position: 0 -1120px; }
div.link-bar > .activitypoints { background-position: 0 -1070px; padding-left: 18px }

/* feed container and items ---------------------- */

div.avatarextrainfo > .content {
    background: transparent url(../Images/icons/big_icons.png) no-repeat 10px 7px;
    min-height: 28px;
	padding:10px 15px 10px 45px;
	border-top:thin gray dotted;
}

div.avatarextrainfo > .smallcontent {
    background: transparent url(../Images/icons/small_icons.png) no-repeat 15px 7px;
	min-height: 15px;
	padding:10px 15px 10px 45px;
	border-top:thin gray dotted;
}

div.avatarextrainfo > .content:first-child {
	border-top: none;
}

div.avatarextrainfo > .content > .remove-feed-item {
	display: block;
	float: right;
	text-indent: -10000px;
	background: transparent url(../Images/icons/close_msg.png) no-repeat;
	width: 13px;
	height: 13px;
}

div.avatarextrainfo > .content:hover > .remove-feed-item {
	background-position: -118px 0;
}

div.avatarextrainfo > .content > .remove-feed-item:active,
div.avatarextrainfo > .content > .remove-feed-item:focus { outline: none; }

div.avatarextrainfo > .content#feed-birthday         { background-position: -3153px 6px; font-weight: bold; color: white; }
div.avatarextrainfo > .content#feed-notification     { background-position: -439px 6px;  }
div.avatarextrainfo > .content#feed-friends          { background-position: -892px 6px;  }
div.avatarextrainfo > .content#feed-item-giftqueue   { background-position: -2240px 6px; }
div.avatarextrainfo > .content#feed-item-dailygift   { background-position: -2240px 6px; }
div.avatarextrainfo > .content#feed-item-creditdonation { background-position: -1790px 6px; }
div.avatarextrainfo > .content#feed-item-productdonation { background-position: -2240px 6px; }
div.avatarextrainfo > .content#feed-item-hcgift      { background-position: -2690px 6px; }
div.avatarextrainfo > .content#feed-item-hc-reminder { background-position: -1339px 6px; }
div.avatarextrainfo > .content#feed-item-hc-expired  { background-position: -1339px 6px; }
div.avatarextrainfo > .content#feed-item-campaign    { background-image: none; }
div.avatarextrainfo > .smallcontent#feed-pending-members  { background-position: 15px -367px; }
div.avatarextrainfo > .smallcontent#feed-lastlogin        { background-position: 15px -297px; }
div.avatarextrainfo > .smallcontent#feed-group-discussion { background-position: 15px -456px; }
div.avatarextrainfo > .smallcontent#feed-trading-enabled  { background-position: 15px -825px; }
div.avatarextrainfo > .smallcontent#feed-trading-disabled { background-position: 15px -886px; }

/* Enter Hotel Submitbtn ---------------------- */

#enter-hotel {
	position: relative;
	top: -20px;
	right: 10px;
	float:right;
	padding:28px 0;
}

#enter-hotel div a, div.div.avatarinfo#enter-hotel div span {
	float: left;
	background: transparent url(../Images/misc/enter_button.png) no-repeat -9px 0;
	height: 49px;
	text-align: center;
	line-height: 47px;
	padding: 0 26px 0 19px;
	font-size: 14px;
	text-decoration:none;
	color:#fff;
	position: relative;
}

#enter-hotel div span {
	padding-right: 10px;	
	background-position: -9px -98px;
}
#enter-hotel div:hover a {
	background-position: -9px -49px;
	text-decoration: none;
}
#enter-hotel div:hover b {
	background-position: 0 -49px;	
}
#enter-hotel div a i {
	background: transparent url(../Images/misc/flashy_arrow.gif) no-repeat 0 50%;
	padding: 10px 10px;
	position: absolute;
	right: 0;
	top: 13px;
	line-height: 1px;
	height: 1px;
	font-size: 1px;
}
#enter-hotel div b {
	float: left;
	background: transparent url(../Images/misc/enter_button.png) no-repeat 0 0;
	height: 49px;
	width: 9px;
}

/* campaign widget ---------------------- */
div.campaigncontainer {
	padding:5px 5px 5px 5px;
}

div.campaigncontainer#odd {
	background-color: #aaa;
}
div.campaigncontainer#even {
	background-color: #bbb;
}


div.campaigncontainer > .image {
	padding:5px 5px 5px 5px;
	float:left;
	width:160px;
	height:62px;
}

div.campaigncontainer > .campaign {
	padding:0 5px 2px 5px;
	min-height:62px;
}

div.campaign > .title {
	padding:0 5px 2px 5px;
	font-weight:bolder;
}

div.campaign > .story {
	padding:0 5px 5px 5px;
}

div.campaign > .published {
	float:left;
}

div.campaign > .readmore {
	float:right;
}

/* news widget ---------------------- */
div.newsHeader {
	height: 187px;
	width: 300px;
	margin:0 5px 0 5px;
}

div.HeadlineStory {
	height: 187px;
	width: 300px;
}

div.HeadlineStory> p.Mainheadline {
	padding:10px 5px 0 15px;
	margin:0 0 0 0;
	color:#fff;
	font-size:large;
	font-weight:bolder;
}
p.Mainheadline > a {
	color:#fff;
}

div.HeadlineStory> p {
	padding:5px 5px 0 15px;
	margin:0 0 0 0;
	color:#fff;
	font-size: 11px;
}

div.storybox {
	width:300px;
	background-color: #7B7B71;
	margin:0 5px 0 5px;
	padding:5px 0 5px 0;
}

div.storybox#odd {
	background-color: #aaa;
}
div.storybox#even {
	background-color: #bbb;
}

div.storybox > p.headline {
	padding:0 5px 0 5px;
	margin:0 0 0 0;
}
div.storybox > p.date {
	padding:0 5px 0 5px;
	margin:0 0 0 0;
	color:#7B7B71;
}
#story {
	width:300px;
	padding:0 5px 0 5px;
}

div.storyboxEnd {
	width:300px;
	background-color: #7B7B71;
	padding:5px 0 5px 0;
	margin:0 5px 10px 5px;
	text-align:right;
}

div.storyboxEnd > .readmore {
	padding:0 10px 0 0;
}

/* staff widget ---------------------- */

div.StaffBox {
	height:110px;
	width:410px;
}

div.StaffBox > div.Usersname {
	padding-top:25px;
	font-weight:bolder;
}

div.StaffBox > div.OnlineStatus {
	padding-top:25px;
	float:right;
	font-weight:bolder;
}

div.OnlineStatus > div.Online {
	color:green;
}
div.OnlineStatus > div.Offline {
	color:maroon;
}

/* News Page ---------------------- */

div.contentBox > div.boxContent > a {
	text-decoration:none;
}

div.contentBox > div.boxContent > a:hover {
	font-weight:bold;
}

div.boxContent > div.story {
	padding:2px 10px 2px 10px;
}

div.boxContent > div.extrainfo {
	color:#BBB;
	height:17px;
}

div.boxContent > div.extrainfo > div.poster {
	padding:5px 15px 0 5px;
	float:left;
}

div.boxContent > div.extrainfo > div.date {
	padding:5px 15px 0 15px;
	float:right;
}

/* Fancy Triangle shit ---------------------- */

.triangle-border {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	border:5px solid #cccccc;
	color:#333;
	background:#fff;
	
	/* css3 */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.triangle-border.left {
	margin-left:30px;
}

.triangle-border.right {
	margin-right:30px;
}

.triangle-border.staff {
	border:5px solid #3355AA;
}

.triangle-border:before {
	content:"";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-40px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	width:0;
	height:0;
	border:20px solid transparent;
	border-top-color:#cccccc;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"";
	display:block; /* reduce the damage in FF3.0 */
	position:absolute;
	bottom:-26px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	width:0;
	height:0;
	border:13px solid transparent;
	border-top-color:#fff;
}

/* creates the larger triangle */
.triangle-border.left:before {
	top:10px; /* controls vertical position */
	left:-30px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:15px 30px 15px 0;
	border-style:solid;
	border-color:transparent #cccccc;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	left:-21px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:9px 21px 9px 0;
	border-style:solid;
	border-color:transparent #fff;
}

/* creates the larger triangle */
.triangle-border.right:before {
	top:10px; /* controls vertical position */
	right:-30px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:15px 0 15px 30px;
	border-style:solid;
	border-color:transparent #cccccc;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	right:-21px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:9px 0 9px 21px;
	border-style:solid;
	border-color:transparent #fff;
}

.triangle-border.staff:before {
	border-color:transparent #3355AA;
}

.triangle-border.staff:after {
	border-color:transparent #fff;
}

/* News Comments ---------------------- */

div.boxContent > div.UserComment.left {
	min-height:122px;
	padding-right:20px;
}
div.boxContent > div.UserComment.left > div.Avatar {
	float:left;
}
div.boxContent > div.UserComment.left > p#Comment {
	margin-left:100px;
	width:360px;
}

div.boxContent > div.UserComment.right {
	min-height:122px;
	padding-right:20px;
}
div.boxContent > div.UserComment.right > div.Avatar {
	float:right;
}
div.boxContent > div.UserComment.right > p#Comment {
	margin-left:20px;
	margin-right:80px;
	width:360px;
}

div.boxContent > div.CommentInput {
	padding-top:10px;
	height:130px;
}
div.boxContent > div.CommentInput > div.MyAvatar {
	float:left;
}
div.boxContent > div.CommentInput > div.Comment {
	float:right;
	padding-right:10px;
}

div.boxContent > div.CommentInput > div.Comment > textarea {
	width: 400px;
	height: 100px;
	border: 5px solid #cccccc;
	padding: 5px;
	margin:0 20px 20px 0;
	background-image: url(../Images/misc/comment.gif);
	background-position: bottom right;
	background-repeat: no-repeat
}

div.Submitbtn {
	padding:5px 5px 5px 5px;
}

div.Submitbtn.right {
	float:right;
}

div.Submitbtn.left {
	float:left;
}

.Submitbtn a, .Submitbtn button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.Submitbtn button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.Submitbtn button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.Submitbtn button img, .Submitbtn a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .Submitbtn a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.Submitbtn a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .Submitbtn a.positive{
    color:#529214;
}
.Submitbtn a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.Submitbtn a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.Submitbtn a.negative, button.negative{
    color:#d12f19;
}
.Submitbtn a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.Submitbtn a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/* REGULAR */

button.regular, .Submitbtn a.regular{
    color:#336699;
}
.Submitbtn a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.Submitbtn a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* General boxes - error and success ---------------------- */

div.errormsg {
	padding: 7px;
	background-color: #fff4f2;
	border: 1px solid #a63c29;
	color: #E2001A;
	margin-top: 5px;
}

div.errormsg > h3 {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	font-size: 13px;
}

div.goodmsg {
	padding: 7px;
	background-color: #d8f3d8;
	border: 1px solid #4da04d;
	color: #205220;
	margin-top: 5px;
}

div.goodmsg > h3 {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	font-size: 13px;
}

form {
	padding-bottom:30px;
}

form > input {
	border:1px gray solid;
	font-size:10px;
	padding:1px 2px 1px 5px;
	margin:5px 0 5px 5px;
	width:200px;
}

a.selected {
	font-weight:bold;
}

.display_none {
	display:none;
}

/* Voting Page --------------- */
body.votepage {
	background-image: url( '../Images/bg.gif' );
}

.votepage .contentBox {
	width:330px;
	padding:5px 5px 5px 5px;
	text-align:center;
}